<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2020/6/18
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息管理系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <!--[endif]-->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        #h1 {
            text-align: center;
            font-size: 30px;
            margin-top: 20px;
        }

        .form-inline {
            padding: 10px;
            float: left;
        }

        table {
            justify-content: center;
        }

        th, td {
            font-size: 20px;
        }

        #btn {
            float: right;
            margin-top: 10px;
        }

        .container {
            padding-top: 20px;
        }

        .nav {
            margin: auto;
            width: 460px;
        }

        #form {
            width: 100%;
        }

    </style>
    <script>
        function method(id) {
            // 请求用户确认，防止误删
            var b = confirm("您真的要删除这条数据么？");
            if (b) {
                location.href = "${pageContext.request.contextPath}/deleteServlet?id=" + id;
            }
        }

        window.onload = function () {

            //给删除选中按钮增加单击事件，判断是否有数据被选中
            //如果有数据被选中，提示用户确认是否删除，如果确认删除，提交删除的id数组，一个一个删除
            //如果没有选中数据，提示  您没有选中任何条目
            document.getElementById("delSelected").onclick = function () {
                var flag = false;
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    if (cbs[i].checked) {
                        flag = true;
                        break;
                    }
                }
                if (flag) {
                    if (confirm("您确定要删除选中条目么？")) {
                        //表单提交
                        document.getElementById("form").submit();
                    }
                } else {
                    alert("您没有选中任何条目！")
                }

            }
            //全选和全不选功能
            document.getElementById("cbAll").onclick = function () {
                //获取下边列表中所有的cb对象
                var cbs = document.getElementsByName("cb");
                //遍历
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = this.checked;
                }
            }


        }
    </script>
</head>
<body>

<div class="container-fluid">

    <div id="h1">
        <h1>员工信息列表</h1>
    </div>
    <div>
        <form class="form-inline" action="${pageContext.request.contextPath}/findEmpByPageServlet" method="post">
            <div class="form-group">
                <label for="ename">姓名</label>
                <input type="text" name="ename" value="${requestScope.condition.get("ename")[0]}" class="form-control" id="ename">
            </div>
            <div class="form-group">
                <label for="job_id">职位编号</label>
                <input type="text" name="job_id" value="${requestScope.condition.get("job_id")[0]}" class="form-control" id="job_id">
            </div>
            <div class="form-group">
                <label for="dept_id">部门编号</label>
                <input type="text"  name="dept_id" value="${requestScope.condition.get("dept_id")[0]}" class="form-control" id="dept_id">
            </div>
            <button type="submit" class="btn btn-default">查询</button>
        </form>

        <div id="btn">
            <a class="btn btn-success" href="${pageContext.request.contextPath}/add.jsp" role="button">添加员工</a>
            <a class="btn btn-success" href="javascript:void (0)" id="delSelected" role="button">删除选中</a>
        </div>

    </div>
    <form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
        <table class="table table-striped container">
            <tr>
                <th>
                    <input type="checkbox" id="cbAll">
                </th>
                <th>员工编号</th>
                <th>姓名</th>
                <th>职位编号</th>
                <th>上级编号</th>
                <th>入职日期</th>
                <th>薪资</th>
                <th>奖金</th>
                <th>所属部门编号</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${requestScope.page.list}" var="emp">
                <tr>
                    <td>
                        <input type="checkbox" name="cb" value="${emp.id}">
                    </td>
                    <td>${emp.id}</td>
                    <td>${emp.ename}</td>
                    <td>${emp.job_id}</td>
                    <td>${emp.mgr}</td>
                    <td>${emp.dateStr}</td>
                    <td>${emp.salary}</td>
                    <td>${emp.bonus}</td>
                    <td>${emp.dept_id}</td>
                    <td>
                        <a class="btn btn-default" href="${pageContext.request.contextPath}/findServlet?id=${emp.id}"
                           role="button">修改</a>
                        <a class="btn btn-default" href="javascript:method(${emp.id})" role="button">删除</a>
                    </td>
                </tr>
            </c:forEach>

        </table>
    </form>
    <div class="nav">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <c:if test="${requestScope.page.currentPage==1}">
                <li class="disabled">
                    </c:if>
                <c:if test="${requestScope.page.currentPage != 1}">
                    <li>
                    </c:if>

                    <a href="${pageContext.request.contextPath}/findEmpByPageServlet?currentPage=${requestScope.page.currentPage-1}&row=5&ename=${requestScope.condition.get("ename")[0]}&job_id=${requestScope.condition.get("job_id")[0]}&dept_id=${requestScope.condition.get("dept_id")[0]}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <c:forEach begin="1" end="${requestScope.page.totalPage}" var="i">
                    <c:if test="${requestScope.page.currentPage == i}">
                        <li class="active" >
                    </c:if>
                    <c:if test="${requestScope.page.currentPage != i}">
                        <li>
                    </c:if>
                            <a href="${pageContext.request.contextPath}/findEmpByPageServlet?currentPage=${i}&row=5&ename=${requestScope.condition.get("ename")[0]}&job_id=${requestScope.condition.get("job_id")[0]}&dept_id=${requestScope.condition.get("dept_id")[0]}">${i}</a>
                        </li>

                </c:forEach>

                    <c:if test="${requestScope.page.currentPage == requestScope.page.totalPage}">
                    <li class="disabled">
                        </c:if>
                        <c:if test="${requestScope.page.currentPage !=requestScope.page.totalPage}">
                    <li>
                        </c:if>

                    <a href="${pageContext.request.contextPath}/findEmpByPageServlet?currentPage=${requestScope.page.currentPage+1}&row=5&ename=${requestScope.condition.get("ename")[0]}&job_id=${requestScope.condition.get("job_id")[0]}&dept_id=${requestScope.condition.get("dept_id")[0]}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>

                <span style="font-size: 25px;margin-left: 5px">共${requestScope.page.totalCount}条数据，共${requestScope.page.totalPage}页</span>
            </ul>

        </nav>
    </div>


</div>

</body>
</html>